<template>
	<view class="content">
		<!-- 头部导航 -->
		<!-- #ifdef H5 -->
		<view class="repair_head repair_head_h5">
			<view class="repair_nav" :class="isShowNav == 1? 'isShowBill':''" @click="headNav('1')"><text>全部</text></view>
			<view class="repair_nav" :class="isShowNav == 2? 'isShowBill':''" @click="headNav('2')"><text>待处理</text></view>
			<view class="repair_nav" :class="isShowNav == 3? 'isShowBill':''" @click="headNav('3')"><text>已完成</text></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="repair_head repair_head_wx">
			<view class="repair_nav" :class="isShowNav == 1? 'isShowBill':''" @click="headNav('1')"><text>全部</text></view>
			<view class="repair_nav" :class="isShowNav == 2? 'isShowBill':''" @click="headNav('2')"><text>待处理</text></view>
			<view class="repair_nav" :class="isShowNav == 3? 'isShowBill':''" @click="headNav('3')"><text>已完成</text></view>
		</view>
		<!-- #endif -->
		<!-- 报修列表 -->
		<view class="repair_list">
		<!-- 1 提交 2 正在处理 3 完成 4 取消报修 -->
			<view class="repair_item" v-for="(item,index) in userInfo" :key="index" @click="goDrtail(item.id)">
				<!-- 上 -->
				<!-- #ifdef H5 -->
				<view class="item_top">
					<text>报修编号: {{item.code}}</text>
					<text>{{changeDate(item,index)}}</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="item_top">
					<text class="wx_text">报修编号: {{item.code}}</text>
					<text class="wx_text">{{changeDate(item,index)}}</text>
				</view>
				<!-- #endif -->
				<view class="item_top">
				</view>
				<!-- 中 -->
				<view class="item_con">
					<image class="item_con_img" :src="imgUrl+'/static/wap/img/qian@2x.png'"></image>
					<view class="item_con_de">
						<text>{{item.type}}</text>
						<text>{{item.content}}</text>
					</view>
				</view>
				<!-- 下 -->
				<view class="item_foo">
					<text class="foo_one"> {{item.addr}}</text>
					<text class="foo_tow" @click="bx_handle(item)">{{item.status | status}}</text>
				</view>
			</view>
			<view class="no_data" v-if="noMoreData">
				<text>暂无更多数据</text>
			</view>
		</view>
		<!-- 新增报修 -->
		<image :src="imgUrl+'/static/wap/img/addBaoxiu.png'" mode="" class="addBaoxiu" @click="add"></image>
	</view>
</template>

<script>
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				isShowNav: 1,
				type: '',
				page: 1,
				limit: 3,
				noMoreData: false,
				userInfo: [], // 保修列表 
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getRepairList()
		},
		
		methods: {
			changeDate(v,n){
				if(!v){
					console.log(n)
					console.log(v)
					return
				}
				var arr=v.create_time.split(" ")
				return arr[0]||v.create_time
			},
			add() {
				uni.navigateTo({
					url: '../addRepair/addRepair'
				})
			},
			// 导航栏切换 事件
			headNav(num) {
				if(this.isShowNav==num){
					return
				}
				this.userInfo=[]
				this.isShowNav = num
				// 初始化页数
				this.page = 1
				// 初始化暂无数据状态
				this.noMoreData = false
				if (num == 1) {
					this.type = ''
				} else if(num ==2){
					console.log(num)
					this.type=1
				}else{
					this.type = num;
				}
				this.getRepairList()
			},
			// 新增页面的保修类型
			getRepairList() {
				var that = this;
				that.ajax({
					url: 'api/repair/getRepairList',
					data: {
						page: that.page,
						limit: 4,
						type: that.type
					},
					success: function(res) {
						if(res.code!=200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							return
						}
						if (res.data.length <= 0) {
							uni.showToast({
								title: '没有更多数据了',
								icon: 'none'
							})
							that.noMoreData = true
						} else {
							if(that.page==1){
								that.userInfo=[]
							}
							that.transferArray(res.data)
							that.noMoreData = false
							// console.log(res.data)
							// console.log(that.userInfo)
						}
					}
				})
			},
			// 对象转数组
			transferArray(obj) {
				for (let i in obj) {
					this.userInfo.push(obj[i]);
				}
			},
			// 跳转详情
			goDrtail(id) {
				uni.navigateTo({
					url: "../repairDeta/repairDeta?id=" + id
				})
			}
		},
		// 状态过滤
		filters: {
			status(info) {
				if (info == 1) {
					return '待处理'
				} else if (info == 2) {
					return '正在处理'
				} else if (info == 3) {
					return '完成'
				} else {
					return '取消保修'
				}
			}
		},
		onReachBottom() { 
			console.log("触底了")
			console.log(!this.noMoreData)
			if (!this.noMoreData) {
				this.page += 1
				this.getRepairList()
			}
		},
	}
</script>

<style lang="less" scoped>
	.content {
		color: #333;
		background-color: #F7F9FB;
		padding-top: 40rpx;
		position: relative;
	}
	// page{
	// 		background-color: #F7F9FB;
	// }
	.addBaoxiu {
		position: fixed;
		right: 50rpx;
		bottom: 200rpx;
		width: 150rpx;
		height: 150rpx;
	}

	.repair_head {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		.repair_nav {
			margin: 0 60rpx;
			font-size: 34rpx;
		}
	}
	.repair_head_h5{
		position: fixed;
		width: 100%;
		top: 80rpx;
		background: white;
		z-index: 10;
		left: 0;
	}
	.repair_head_wx{
		position: fixed;
		width: 100%;
		top: 0rpx;
		background: white;
		z-index: 10;
		left: 0;
	}
	// 报修列表
	.repair_list {
		margin: 0 30rpx;
		padding-bottom: 20rpx;
		margin-top: 100rpx;
		.repair_item {
			// 16rpx
			padding: 37rpx 29rpx 39rpx ;
			margin-top: 18rpx;
			font-size: 30rpx;
			background-color: #fff;
			border-radius: 25rpx;
			.item_top {
				margin-bottom: 20rpx;
				letter-spacing: 1rpx;
				display: flex;
				justify-content: space-between;
				& text{
					font-size: 13rpx;
				}
				& .wx_text{
					font-size: 28rpx;
				}
				& text:nth-child(2) {
					color: #999;
				}
			}

			.item_con {
				display: flex;
				height: 140rpx;
				margin-bottom: 37rpx;

				.item_con_img {
					margin-right: 42rpx;
					width: 140rpx;
					height: 140rpx;
				}

				.item_con_de {
					font-size: 28rpx;
					flex: 1;
					& text:nth-child(1){
						font-size: 30rpx;
						font-weight: bold;
					}
					& text:nth-child(2) {
						margin-top: 38rpx;
						height: 76rpx;
						font-weight: 450;
						letter-spacing: 1rpx;
						display: -webkit-box !important;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}

			.item_foo {
				display: flex;
				justify-content: space-between;
				height: 62rpx;
				line-height: 62rpx;

				.foo_one {
					width: 300rpx;
					height: 100%;
					font-size: 24rpx;
					color: #999;
					text-align: center;
					border: 2rpx solid #cdcece;
					border-radius: 15rpx;
				}

				.foo_tow {
					width: 196rpx;
					height: 100%;
					color: #fff;
					text-align: center;
					font-size: 30rpx;
					letter-spacing: 2rpx;
					border-radius: 15rpx;
					background-color: #2AABAD;
				}
			}
		}
	}
	// 暂无更多数据
	.no_data{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		text-align: center;
	}
</style>
